import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

import { setLocaleLanguage } from '@/utils/i18n/i18n'
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
//@ts-ignore
import en from 'element-plus/dist/locale/en.mjs'

const useLocaleStore = defineStore('locale', () => {
  const currentLanguage = ref<'zh-cn' | 'en'>('zh-cn') // 用于显示当前是什么语言
  const currentLocale = computed(() =>
    // 用于绑定给App.vue中ElConfigProvider组件的locale属性
    currentLanguage.value === 'zh-cn' ? zhCn : en
  )

  function CHANGE_LANGUAGE(lang: 'zh-cn' | 'en') {
    // 切换UI框架与I18n的语言种类
    currentLanguage.value = lang
    setLocaleLanguage(currentLanguage.value)
  }

  return { currentLocale, currentLanguage, CHANGE_LANGUAGE }
})

export default useLocaleStore
